<template>
  <div id="islider">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in swiperList">
          <img :data-src="item.contentImg" class="swiper-lazy">
          <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ISlider from '../assets/js/swiper.min.js'

export default {
  ready () {
    setTimeout(() => {
      this.slider = new ISlider('.swiper-container', {
        loop: true,
        lazyLoading: true,
        autoplayDisableOnInteraction: false,
        autoplay: 5000
      })
    }, 1500)
  },
  data () {
    return {
      slider: null,
      swiperList: [
        {contentImg: 'vue-sui-demo/src/assets/images/look_img/swiper1.jpg'},
        {contentImg: 'vue-sui-demo/src/assets/images/look_img/swiper1.jpg'},
        {contentImg: 'vue-sui-demo/src/assets/images/look_img/swiper1.jpg'},
        {contentImg: 'vue-sui-demo/src/assets/images/look_img/swiper1.jpg'}
      ]
    }
  },
  props: [
    'banner'
  ],
  filters: {
    formatSwiperContent: function (content) {
      return content.replace(/<[^>]+>/g, '')
    }
  },
  watch: {
    banner: {
      handler: function (val, oldVal) {
        this.loadSwiperData()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
@import '../assets/css/swiper.min.css';
#islider {
  width: 100%;
  height: 20%;
  position: absolute;
  top: 65px;
  left: 0;
  padding: 0px 15px;
}
#islider .swiper-container{
  height:100%;
  padding-bottom:0;
  background-color:rgba(0,0,0,.35);
  border-radius:5px;
}
#islider .swiper-container .swiper-wrapper{
  width:100%;
  height:100%;
}
#islider img{
  width:100%;
  height:auto;
}
</style>
